<template>
  <div class="info" v-if="info">
    <div class="title">{{ info.questionnaireTitle }}</div>
    <div class="question_list">
      <div class="list_item" v-for="item in info.questionList">
        <div class="item_title">
          <span>{{ item.questionTitle }}</span>
          <span
            v-if="item.isRequired == 1"
            class="is_required"
            style="color: red"
          >
            *
          </span>
        </div>
        <div v-if="item.questionType == 1">
          <van-radio-group v-model="item.optionId" :disabled="true" shape="dot">
            <van-radio
              :name="index"
              v-for="(itg, index) in item.questionOptionList"
            >
              {{ itg.optionContent }}
            </van-radio>
          </van-radio-group>
        </div>
        <div v-if="item.questionType == 2">
          <van-checkbox-group v-model="item.optionId" :disabled="true" shape="square">
            <van-checkbox
              :name="index"
              v-for="(itg, index) in item.questionOptionList"
            >
              {{ itg.optionContent }}
            </van-checkbox>
          </van-checkbox-group>
        </div>
        <div v-if="item.questionType == 3">
          <van-field v-model="item.optionIsText" :disabled="true" placeholder="请填写" maxlength="50" />
        </div>
        <div v-if="item.questionType == 4">
          <van-field
            :model-value="item.optionIsText"
            maxlength="50"
            :disabled="true"
						placeholder="请选择时间"
          />
          <van-popup v-model:show="item.showTime" :disabled="true" position="bottom">
            <van-date-picker
              @confirm="confirmTime(item)"
              @cancel="item.showTime = false"
              v-model="item.backText"
              title="选择日期"
              :min-date="minDate"
              :max-date="maxDate"
              :columns-type="columnsType"
          /></van-popup>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { queryQuestionnaireSubmissionRecordDetails } from "@/api/index";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
let info = ref();
let router = useRouter();
let route = useRoute();
let id = route.params.id;
function getInfo() {
  queryQuestionnaireSubmissionRecordDetails(id).then((res) => {
    res.data.questionList.forEach((item, index) => {
      item.optionId = null;
      if (item.questionType == 1) {
        item.questionOptionList.forEach((itg, i) => {
          if (itg.isCheck == 1) {
            item.optionId = i;
          }
        });
      }
      if (item.questionType == 2) {
        item.optionId = [];
        item.questionOptionList.forEach((itg, i) => {
          if (itg.isCheck == 1) {
            item.optionId.push(i);
          }
        });
      }
    });
    info.value = res.data;
    console.log(res.data)
  });
}
getInfo();
</script>
<style scoped lang="scss">
.info {
  padding: 16px 10px;

  .content {
    padding: 0 0px;
    :deep(img) {
      width: 100%;
    }
  }
}

.title {
  font-weight: bold;
  color: #333;
  font-size: 20px;
  padding: 5px;
  text-align: center;
  color: var(--el-color-primary);
}
.info_type {
  font-size: 15px;
  color: #666;
}
.line {
  border-bottom: 1px dashed #ddd;
  margin: 20px 0;
}
.list_item {
  padding: 10px;
  .is_required {
    margin-left: 4px;
    transform: translateY(3px);
    display: inline-block;
  }
}
.item_title {
  color: #333;
  font-size: 15px;
}
.save_btn{
	width: 200px;
	height: 40px;
	background: var(--el-color-primary);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 40px;
	color: white;
	text-align: center;
	line-height: 40px;
	font-size: 18px;
	border-radius: 8px;
	&:active{
		background: var(--el-color-primaryop9)
	}
}
</style>
